class PostFrom extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            loginName: '',
            loginPwd: ''
        };
        // this.onChange = this.onChange.bind(this)
    }
    onChange(e) {//把当前修改的值赋入state
        this.setState({
            [e.target.name]:e.target.value
        })
    }
    onSubmit(e) {
        // 阻止事件传递
        e.preventDefault();
        // 把表单用的最终数据从state中提取出来,传入请求
        const data ={
            loginName:this.state.loginName,
            loginPwd:this.state.loginPwd
        }
        fetch('/bagevent-web/login',{
            // post提交
            method:"POST",
            headers:{ 'Content-Type': 'application/json' },
            body:JSON.stringify(data),
        })
            .then(function (res){
                if (res.status == 200){
                    res.text().then(function (data) {
                            if (data=="success"){
                                alert("登录成功")
                            }else {
                                alert("登录失败,密码错误或账号不存在")
                            }
                    })
                }else {
                    alert("出错了")
                }
            })
    }
    render() {
        return (
            <div>
            <form onSubmit={this.onSubmit.bind(this)}>
            <div>
            <label >账号：</label>
        <br />
        <input type="text" name="loginName" onChange={this.onChange.bind(this)} defaultValue={this.state.loginName} />
        </div>
        <div>
        <label >密码：</label>
        <br />
        <input type="password" name="loginPwd" onChange={this.onChange.bind(this)} defaultValue={this.state.loginPwd} />
        </div>
        <br />
        <button type="submit">登录</button>
            <a href="loginlog.html">登录记录</a>
            </form>
            </div>
    )
    }
}
ReactDOM.render(
<PostFrom />,
    document.getElementById('root')
);